<template>
  <view class="balance-container">
    <view class="tips">任务列表中登陆成功过的帐号会自动查询</view>  
    <view class="totalBalance">当前总余额:{{totalBalance}}元</view>  
    <!-- 列表项 -->
    <uni-list>
      <uni-list-item v-for="(item, index) in listData" :key="index">
        <template v-slot:header>
          <view class="list-item-content">
            <text class="title">{{ item.title }}</text>
            <view class="info">
              <text>{{ item.phone }}</text>
              <text>¥{{ item.amount }}</text>
              <button class="item-search-btn" @click="handleItemSearch(item)">查询</button>
            </view>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface ListItem {
  title: string
  phone: string
  amount: number
}

// 列表数据
const listData = ref<ListItem[]>([
  {
    title: '订单标题1',
    phone: '13800138000',
    amount: 100.00
  },
  {
    title: '订单标题2',
    phone: '13900139000',
    amount: 200.00
  }
])

const totalBalance = ref(0);

// 列表项查询方法
const handleItemSearch = (item: ListItem) => {
  console.log('查询具体项目:', item)
}
</script>

<style lang="scss">
.balance-container {
  padding: 20rpx 0;
  .tips {
    font-size: 24rpx;
    color: #666;
    padding-bottom: 20rpx;
    text-align: center;
  }
  .totalBalance {
    color: #00B26A;
    font-size: 30rpx;
    text-align: center;
    font-weight: bold;
    padding-bottom: 20rpx;
  }
  .list-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
    }
    
    .info {
      display: flex;
      gap: 20rpx;
      font-size: 28rpx;
      color: #666;
      align-items: center;
      
      .item-search-btn {
        margin: 0;
        padding: 4rpx 20rpx;
        font-size: 24rpx;
        background-color: #00B26A;
        color: #fff;
        min-height: auto;
        line-height: 1.8;
      }
    }
  }

}
</style>